<template>
  <view class="page">
    <zan-tab
      :scroll="false"
      :list="list"
      :height="40"
      :selectedId="selectedId"
      :fixed="true"
      @tabchange="handleTabChange"
    />


    <div class="list-warp" v-if="selectedId==='p'">
      <trade></trade>
      <trade></trade>
    </div>

    <div class="list-warp" v-if="selectedId==='c'">
      <trade></trade>
      <trade></trade>
      <trade></trade>
      <trade></trade>
    </div>
  </view>

</template>

<script>
  import trade from '@/components/trade';

export default {

  data() {
    return {
      selectedId: 'p',
      list: [
        {
          id: 'p',
          title: '预约中'
        },
        {
          id: 'c',
          title: '已完成'
        },
        {
          id: 'i',
          title: '收到邀请'
        },
      ],
      asd: '123'
    };
  },

  components: {
    trade
  },

  methods: {
    handleTabChange (selectedId) {
      // console.log(selectedId.target[0]);
      // console.log(this.selectedId);
      this.selectedId = selectedId.target[0];
    }
  }

}
</script>

<style>
  page,
  .page {
    height: 100%;
  }
</style>

<style scoped>
.list-warp {
  background-color: #F8F8F8;
  padding: 0.1rem 0;
  /*margin-top: 100px;*/
  /*height: 100%;*/
}

</style>
